<!DOCTYPE html>
<!-- saved from url=(0056)http://layim.layui.com/demo/mobile.html?from=home&v=0325 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>LayIM 移动版</title>
<link rel="stylesheet" href="/css/layui.mobile.css">
<link id="layuicss-skinlayim-mobilecss" rel="stylesheet" href="/css/layim.css" media="all">
<style type="text/css">
	.lay-redpacket{}
	.lay-redpacket input{width:90%; text-align:right; padding-left:.5rem; padding-right:.5rem; height:3rem;border-radius:3px; border:0px;}
	.lay-inputdiv{ margin: a auto; padding: 1rem;}
	.lay-inputdiv label{ position:absolute; padding-left:1rem; padding-top:.5rem;}
	.sendBtn{background-color:#fa6253; width:90%;margin-top:1rem; height:3rem; border-radius:5px; font-weight:bold; border:0px;color:#fff;}
	.sendBtn:hover{background-color:#c4453f; width:90%;margin-top:1rem; height:3rem; border-radius:5px; font-weight:bold; border:0px;color:#fff;}
</style>
</head>
<body>
<div class="layui-m-layer layui-m-layer1 msg-log" style="display:block;">
  <div class="layui-m-layermain">
    <div class="layui-m-layersection">
      <div class="layui-m-layerchild">
        <div class="layui-m-layercont">
          <div class="layim-panel">
            <div class="layim-title">
              <p><i class="layui-icon layim-chat-back"></i>贺海文<span class="layim-chat-status"></span></p>
            </div>
            <div class="layui-unselect layim-content">
              <div class="layim-chat layim-chat-friend">
                <div class="layim-chat-main">
                  <ul>
                    <li class="layim-chat-li">
                      <div class="layim-chat-user"><img src="/images/0"><cite>贺海文</cite></div>
                      <div class="layim-chat-text">你没发错吧？<img alt="[微笑]" title="[微笑]" src="/images/0.gif"> </div>
                    </li>
                    <li class="layim-chat-li">
                      <div class="layim-chat-user"><img src="/images/0"><cite>贺海文</cite></div>
                      <div class="layim-chat-text">你没发错吧？<img alt="[微笑]" title="[微笑]" src="/images/0.gif"> </div>
                    </li>

                    <li class="layim-chat-li">
                       <div class="layim-chat-user" ><img src="/images/0"><cite>贺海文</cite></div>
                       <div class="layim-chat-text">
                         <div class="point">
                              <image src="/images/rp.png" class="point-image"></image>
                                    <div class="point-detail">
                                        <span>恭喜发财，大吉大利</span>
                                    </div>
                                    <div class="point-view"><span>查看红包</span></div>
                              </div>
                              <div class="point-dscr">娱乐积分</div>
                          </div>
                       </div>
                    </li>

                  </ul>
                </div>
                <div class="layim-chat-footer">
                  <div class="layim-chat-send">
                    <input type="text" autocomplete="off" id="msg">
                    <button class="layim-send" id="send">发送</button>
                    <!--<button class="layim-send layui-disabled" layim-event="send">发送</button>-->
                    </div>
                 <div class="layim-chat-tool" data-json=""><span class="layui-icon layim-tool-face" title="选择表情" layim-event="face" id="sendPointBtn"></span></div>
                 </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--send point start-->
<div class="layui-m-layer layui-m-layer1 send-point"  style="display:none;">
    <div class="layui-m-layermain">
      <div class="layui-m-layersection">
        <div class="layui-m-layerchild">
          <div class="layui-m-layercont">
            <div class="layim-panel">
            	<div class="layim-title" style="background-color:#fa6253;">
                <p><i class="layui-icon layim-chat-back" style=" background-color:#"></i>贺海文<span class="layim-chat-status"></span></p>
              </div>
              <div class="layui-unselect layim-content lay-redpacket">
                <div class="lay-inputdiv"><label>总积分：</label><input type="text" id="point" style="" placeholder="总积分"/></div>
                <div class="lay-inputdiv"><label>个&nbsp;&nbsp;&nbsp;数：</label><input type="number" id="num" /></div>
                <div class="lay-inputdiv"><label>描&nbsp;&nbsp;&nbsp;述：</label><input type="text" id="detail" placeholder="恭喜发财，大吉大利"/></div>
                <div class="lay-inputdiv"><button type="button" class="sendBtn">发送<button></div>
              </div>
              
  	 	  </div>
          </div>
         </div>
       </div>
  </div>
</div>
<!--send point end-->
<div class="layui-m-layer layui-m-layer1 detail-point"  style="display:none;">
      <div class="layui-m-layermain">
          <div class="layui-m-layersection">
              <div class="layui-m-layerchild">
                  <div class="layui-m-layercont">
                      <div class="layim-panel">
                          <div class="layim-title">
                            <p><i class="layui-icon layim-chat-back"></i>积分详情<span class="layim-chat-status"></span></p>
                          </div>
                          <div>
                              <!--header-->
                              <div  style="text-align:center;padding-top:90px;width:100%">
                                  <div>
                                      <image src="/images/0" class="avatarUrl"/>
                                  </div>
                                  <div style="padding-top:5px">贺海文</div>
                                  <div style="padding-top:5px;color:#9c9c9c">恭喜发财，大吉大利</div>
                              </div> 
                              
                              <div style="color:#9c9c9c;font-size:14px;padding-top:30px;padding-left:20px; ">3个人，积分被抢光</div>
                              <!--积分列表-->
                              
                              <div class="item" style="margin-top:10px;padding-left:20px;">
                                  <div style="float:left"><image src="/images/0" class="avatarUrl"/></div>
                                  <div style="float:left;margin-left:5px;">
                                      <div>贺海文</div>
                                      <div style="padding-top:5px;color:#9c9c9c">2017年12月11日 10:14:14</div>
                                  </div>
                                  <div style="text-align:right;padding-right:15px;font-weight:bold;font-size:15px;">1.32</div>
                              </div>
                              <div style="clear:both"></div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
</div>

<!--view point start-->

<!--view point end -->

<!-- grab point sart-->
<div style="position:fixed;top:0px;z-index:1000;width:100%;height:100%;background:#000;overflow:hidden;opacity: 0.6;" wx:if="{{rpshow}}"></div>
<div style="position:fixed;z-index:2000;background:url(/images/open.jpg);background-size:cover;width:50%;height:50%;margin-left:20%;margin-top:10%;">
  <div style="padding-left:20px;margin-top:60%;text-align:center;font-size:30px;color:#F5DEB3;font-weight:bolder;">500</div>
  <div style="margin-top:10%;width:100%;height:40%;" bindtap="open" ></div>
</div>
<!-- grab point end -->

<script type="text/javascript" src="/js/jquery-3.2.0.min.js"></script>
<script>
<!--socket io-->
var url = 'ws://localhost:8999/ws';
var socket;
function connect(user,func){
  
  if(typeof(WebSocket) == "undefined") {
      alert("您的浏览器不支持WebSocket");
      return ;
  }
  var connurl  = url+"?uid="+user.uid+"&pwd="+user.pwd+"&uname="+user.nickName+"&rid="+user.rid;
  socket = new WebSocket(connurl);
  //打开事件
  socket.onopen = function() {
      alert("Socket 已打开");
      //socket.send("这是来自客户端的消息" + location.href + new Date());
  };
  //获得消息事件
  socket.onmessage = function(msg) {
     func(msg);
  };
  //关闭事件
  socket.onclose = function() {
      alert("Socket已关闭");
  };
  //发生了错误事件
  socket.onerror = function() {
      alert("发生了错误");
  }
}
$(function(){
  var user = {uid:"oyAQa0Tr42macnFTUlbu_3WuLXV0",pwd:"oyAQa0Tr42macnFTUlbu_3WuLXV0",nickName:"贺海文",rid:1006};
    connect(user,function(msg){

        console.log("收到消息："+msg.data);
        var data = eval("("+msg.data+")")
        var recordHtml ="";
        if(data.type=="msg"){
              recordHtml = "<li class=\"layim-chat-li\">"+
                         " <div class=\"layim-chat-user\"><img src=\"images/0\"><cite>贺海文</cite></div>"+
                         " <div class=\"layim-chat-text\">"+data.data.msg+"</div>"+
                         "</li>";
         }else if(data.type=="point"){
             recordHtml = "<li class=\"layim-chat-li\">"+
                             "<div class=\"layim-chat-user\"><img src=\"/images/0\"><cite>"+data.data.uname+"</cite></div>"+
                             "<div class=\"layim-chat-text\">"+
                               "<div class=\"point\" id=\""+data.data.pointId+"\">"+
                                    "<image src=\"/images/rp.png\" class=\"point-image\"></image>"+
                                          "<div class=\"point-detail\">"+
                                             "<span>"+data.data.detail+"</span>"+
                                          "</div>"+
                                          "<div class=\"point-view\"><span>查看红包</span></div>"+
                                    "</div>"+
                                    "<div class=\"point-dscr\">娱乐积分</div>"+
                                "</div>"+
                             "</div>"+
                          "</li>";
         }
      $(".layim-chat-main ul").append(recordHtml);
    });
});

$("#send").on("click",function(){
    var loginUser = {uid:"oyAQa0Tr42macnFTUlbu_3WuLXV0",pwd:"oyAQa0Tr42macnFTUlbu_3WuLXV0"};
    var msg = {uid:loginUser.uid,pwd:loginUser.pwd,msg:$("#msg").val()};
    console.log("发送普通消息=="+JSON.stringify(msg));
    sendMessage("msg", msg);
});
$("#sendPointBtn").on("click",function(){
    //var msg = {uid:loginUser.uid,pwd:loginUser.pwd,point:parseFloat(e.detail.value.point)*100,num:e.detail.value.num,detail:e.detail.value.detail};
   $(".msg-log").hide();
   $(".send-point").show();
});
$(".sendBtn").on("click",function(){
    var point = $("#point").val();
    var num = $("#num").val();
    var detail = $("#detail").val();
    var loginUser = {uid:"oyAQa0Tr42macnFTUlbu_3WuLXV0",pwd:"oyAQa0Tr42macnFTUlbu_3WuLXV0"};
    var msg = {uid:loginUser.uid,pwd:loginUser.pwd,point:parseFloat(point)*100,num:num,detail:detail};
    console.log("发送积分消息:"+JSON.stringify(msg))
    sendMessage("point",msg);
    $(".msg-log").show();
    $(".send-point").hide();
});
$(".msg-log").on("click",".point",function(){
    $(".detail-point").show();
    $(".msg-log").hide();
    $(".send-point").hide();
    var pointId = $(this).attr("id");
    var url = "/user/detailMsg?pointId="+pointId;
    console.log("get detail point ==="+url);
    $.getJSON(url,function(data){
        console.log(JSON.stringify(data));
        var returnCode = data.code;
        if(returnCode=="200"){
        	var returnData = data.result;
        	
        }
    });
});
function sendMessage(typeMsg,msg){
	var data = {type:typeMsg,data:msg};
	console.log(JSON.stringify(data));
	socket.send(JSON.stringify(data));
}
</script>
</body>
</html>